<template>
	<view class="signList">
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom bg-color="#FFF"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容" :refresher-status.sync="refresherStatus" auto-scroll-to-top-when-reload
			v-model="dataList" @query="queryList">
			<view class="top flex_wrap row_middle row_between">
				<view class="flex_wrap row_middle pepole">
					<u--image v-if="userDetails.avatar == 'null'" :src="`/static/img/conference/MissingAvatar.png`"
						shape="circle" width="80" height="80"></u--image>
					<u--image v-else :src="
                            userDetails.avatar ||
                            `/static/img/conference/MissingAvatar.png`
                        " shape="circle" width="80" height="80"></u--image>
					<view style="width: 36rpx"></view>
					<view class="flex_wrap flex_column left">
						<view>
							<u--text v-if="userDetails.nickName == 'null'" text="微信用户" color="#FFF" size="40rpx" />
							<u--text v-else :text="
                                    userDetails.nickName ||
                                    '微信用户'
                                " color="#FFF" size="40rpx" />
						</view>
						<view><u--text :text="userDetails.customerPhone" color="#FFF" size="28rpx" bold /></view>
					</view>
				</view>
			</view>
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="item_time flex_wrap row_between">
					<u-text :text="$u.timeFormat(item.createTime)" bold size="28rpx" />
					<view style="
			                width: 200rpx;
			                display: flex;
			                align-items: center;
			            ">
						<u-text :text="
			                    getInterface === '1'
			                        ? statusConstans[item.orderStatus]
			                        : orderRefundStatus[item.orderRefundStatus]
			                " color="#588BF3" bold size="28rpx" align="right" />
					</view>
				</view>
				<view class="item_detail flex_wrap row_between" @click.stop="to_purchaseDetail(item)">
					<u-image height="158rpx" width="244rpx" :src="item.goodsName == '购买会员' ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/12/02/9081de61452d4e28ade187b32ac8dc24.png' : item.goodsSnapshot.thumbnail" mode="aspectFill"
						radius="10rpx" />
					<view style="flex: 1; padding-left: 20rpx">
						<text class="total">{{ item.goodsName }}</text>
						<view class="detail_tt flex_wrap">
							<text>{{
			                    item.goodsSnapshot.skuSimpleSpecs || "--"
			                }}</text>
						</view>
						<u-gap height="26rpx" />
						<view class="flex_wrap row_between">
							<u-text :text="'￥' + item.goodsPrice" size="24rpx" bold></u-text>
							<u-text :text="'x' + item.goodsCount" size="24rpx" align="right"></u-text>
						</view>
					</view>
				</view>
				<view class="price">
					<text>实付</text>
					<text class="price_t">￥{{ formatDecimal(item.orderDealAmount) }}</text>
				</view>
				<view class="button flex_wrap row_between" style="
			            padding: 12rpx 24rpx 16rpx 10rpx;
			            justify-content: space-between;
			        " v-if="getInterface === '1'">
					<view style="display: inline-block" @click="connectCustomSerice">
						<u-text v-if="item.orderStatus === 2" text="联系客服" color="#333" size="24rpx"
							prefixIcon="/pages_shop/static/img/order/customer_service.png"
							:iconStyle="{ width: '42rpx', height: '42rpx' }" />
					</view>
					<view class="flex_wrap row_between" style="width: 340rpx">
						<view>
							<!-- <button type="default" class="cancelOrderBtn" v-if="item.orderStatus === 2">申请退款</button> -->
							<button type="default" class="cancelOrderBtn" v-if="item.orderStatus === 1"
								@click.stop="cancelOrder(item)">
								取消订单
							</button>
						</view>
						<view>
							<button type="primary" class="payBtn" v-if="item.orderStatus === 2" @click="toRecive(item)">
								领取
							</button>
							<button type="primary" class="payBtn" v-if="item.orderStatus === 3"
								@click="toreciveList(item)">
								领取记录
							</button>
							<button type="primary" class="payBtn" v-if="item.orderStatus === 1" @click="toPay(item)">
								付款
							</button>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		purchaseListByuser
	} from "@/api/salesmanMeeting.js";
	import {
		formatDecimal
	} from "@/utils/index.js";

	export default {
		data() {
			return {
				customerId: '',
				dataList: [],
				statusMap: {
					2: "待回寄",
					1: "待检测",
					9: "已完成",
				},
				formatDecimal: formatDecimal,
				orderStatusList: [2, 3, 5], //订单状态1待付款2待领取3完成领取4交易关闭5已全额退款(过滤条件,非必需参数)，
				userDetails: {}
			};
		},
		onLoad(options) {
			this.customerId = options.customerId;
			this.userDetails = options
		},
		methods: {
			async queryList(pageNo, pageSize) {
				const params = {
					customerId: this.customerId,
					pageNum: pageNo,
					pageSize: pageSize,
					orderStatusList: this.orderStatusList,
				};
				const result = await purchaseListByuser(params);
				const rows = result.data.rows.map((item) => {
					const goodsSnapshot =
						item.goodsSnapshot && JSON.parse(item.goodsSnapshot);
					// const simpleSpecs =
					// 	(goodsSnapshot.simpleSpecs &&
					// 		JSON.parse(goodsSnapshot.simpleSpecs)) ||
					// 	null;
					// const skuSpecs =
					// 	(goodsSnapshot.skuSpecs &&
					// 		JSON.parse(goodsSnapshot.skuSpecs)) ||
					// 	null;
					item.goodsSnapshot = goodsSnapshot;
					// item.goodsSnapshot.simpleSpecs = simpleSpecs || null;
					// item.goodsSnapshot.skuSpecs = skuSpecs || null;
					return item;
				});
				this.$refs.paging.completeByTotal(rows, result.data.total);
			},
			to_purchaseDetail(item) {
				uni.$u.route({
					url: "/pages_shop1/order/order_detail/order_detail",
					params: {
						id: item.orderNum,
						detailStatus: 1, //1：用户中心进去的  0：客户端领取记录进去的
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.signList {
		::v-deep.u-line {
			height: auto !important;
		}

		position: relative;
	}

	.pepole {
		padding-left: 80rpx;
		padding-bottom: 64rpx;
	}

	.top {
		height: 372rpx;
		width: 100%;
		box-sizing: border-box;
		background-image: url("@/static/img/conference/userDetailsbg.png");
		background-size: cover;
	}

	.item {
		margin: 40rpx 28rpx 0;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
		border-radius: 12rpx;
	}

	.item_time {
		height: 80rpx;
		border-bottom: 2rpx solid #f3f3f3;
		padding: 0 24rpx;
	}

	.item_detail {
		border-bottom: 2rpx solid #f3f3f3;
		padding: 26rpx 20rpx 20rpx;

		image {
			width: 244rpx;
			height: 158rpx;
			border-radius: 8rpx;
		}
	}

	.total {
		display: block;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.detail_tt {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #666666;

		text {
			margin-right: 10rpx;
		}
	}

	.price {
		height: 72rpx;
		text-align: right;
		font-size: 24rpx;
		color: #ff0000;
		line-height: 72rpx;
		margin-right: 12rpx;

		.price_t {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.payBtn {
		width: 158rpx;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		margin-right: 0;
		margin-left: 0;
		background: #588bf3;
		color: #ffffff;
		border-radius: 22rpx;
	}

	.payBtn::after {
		border: none;
	}

	.cancelOrderBtn {
		width: 158rpx;
		height: 44rpx;
		line-height: 42rpx;
		font-size: 24rpx;
		border: 1px solid #e3e3e3;
		border-radius: 22rpx;
		outline: none;
	}

	.cancelOrderBtn::after {
		border: none;
	}

	.customerSerivce {
		width: 32rpx;
		height: 32rpx;
	}
</style>
